import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import type { LoginData } from "@/api/login/types";
import { useState } from "react";

interface LoginFormProps
  extends Omit<React.ComponentProps<"form">, "onSubmit"> {
  onSubmit?: (data: LoginData) => void;
}

export function LoginForm({ className, onSubmit, ...props }: LoginFormProps) {
  const code = ""; // 验证码，暂时不用
  const uuid = ""; // 验证码uuid，暂时不用

  const [username, setUsername] = useState("admin"); // 用户名状态
  const [password, setPassword] = useState("KLF2025admin@"); // 密码状态

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (onSubmit) {
      onSubmit({ username, password, code, uuid } as LoginData);
    }
  };

  return (
    <form
      className={cn("flex flex-col gap-6", className)}
      {...props}
      onSubmit={handleSubmit}
    >
      <FieldGroup>
        <div className="flex flex-col items-center gap-1 text-center">
          <h1 className="text-2xl font-bold">账号登录</h1>
          <p className="text-muted-foreground text-sm text-balance">
            请输入你的账号密码进行登录操作
          </p>
        </div>
        <Field>
          <FieldLabel htmlFor="username">账号</FieldLabel>
          <Input
            id="username"
            type="text"
            placeholder="请输入您的账号"
            required
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </Field>
        <Field>
          <div className="flex items-center">
            <FieldLabel htmlFor="password">密码</FieldLabel>
          </div>
          <Input
            id="password"
            type="password"
            placeholder="请输入您的密码"
            required
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </Field>
        <Field>
          <Button type="submit">登录</Button>
        </Field>
      </FieldGroup>
    </form>
  );
}
